<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
    <title>多边形和圆的绘制和编辑</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script
        src="https://webapi.amap.com/maps?v=1.4.15&key=b3d347ea63d8ac4e07bc3915f0123669&plugin=AMap.PolyEditor,AMap.CircleEditor"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
</head>

<body>
    <div id="container"></div>
    <!-- 多边形 -->
    <div class="input-card" style="width: 120px">
        <button class="btn" style="margin-bottom: 5px">多边形</button>
        <button class="btn" onclick="createPolygon()" style="margin-bottom: 5px">创建多边形</button>
        <button class="btn" onclick="openPolygon()" style="margin-bottom: 5px">开始编辑</button>
        <button class="btn" onclick="closePolygon()" style="margin-bottom: 5px">结束编辑</button>
        <button class="btn" onclick="setDraggable()" style="margin-bottom: 5px">切换拖拽</button>
        <button class="btn" onclick="clearMask()" style="margin-bottom: 5px">清除遮罩</button>
        <button class="btn" onclick="clearAllMask()" style="margin-bottom: 5px">清除所有覆盖物</button>
    </div>
    <!-- 圆 -->
    <div class="input-card" style="width: 120px;margin-right: 133px;">
        <button class="btn" style="margin-bottom: 5px">圆</button>
        <button class="btn" onclick="createCircle()" style="margin-bottom: 5px">创建圆</button>
        <button class="btn" onclick="openCircle()" style="margin-bottom: 5px">开始编辑</button>
        <button class="btn" onclick="closeCircle()" style="margin-bottom: 5px">结束编辑</button>
        <button class="btn" onclick="setCircleDraggable()" style="margin-bottom: 5px">切换拖拽</button>
        <button class="btn" onclick="clearCircleMask()" style="margin-bottom: 5px">清除遮罩</button>
        <button class="btn" onclick="clearAllMask()" style="margin-bottom: 5px">清除所有覆盖物</button>
    </div>
    <!-- 多边形 -->
    <script type="text/javascript">
        var polyEditor = null
        var polygon = null
        var draggable = true
        var map = new AMap.Map("container", {
            center: [116.400274, 39.905812],
            zoom: 14
        });

        // 创建多边形
        function createPolygon() {
            polygon = new AMap.Polygon({
                path: [
                    [116.403322, 39.920255],
                    [116.410703, 39.897555],
                    [116.402292, 39.892353],
                    [116.389846, 39.891365]
                ],
                strokeColor: "#FF33FF",
                strokeWeight: 6,
                strokeOpacity: 0.2,
                fillOpacity: 0.4,
                fillColor: '#1791fc',
                zIndex: 50,
                draggable: draggable, //是否可拖动
            })

            map.add(polygon)
            // 缩放地图到合适的视野级别
            map.setFitView([polygon])

            polyEditor = new AMap.PolyEditor(map, polygon)

            // 监听事件,注意监听事件分为polyEditor和polygon
            // https://lbs.amap.com/api/javascript-api/reference/overlay#polygon
            // https://lbs.amap.com/api/javascript-api/reference/plugin#AMap.PolyEditor
            polyEditor.on('addnode', function (event) {
                //切忌不要通过event的路径去拿path，tm路径居然会不定时变，
                //辛亏上线前发现了。可以用polygon.getPath()
                log.info('触发事件：addnode')
            })

            polyEditor.on('adjust', function (event) {
                log.info('触发事件：adjust')
            })

            polyEditor.on('removenode', function (event) {
                log.info('触发事件：removenode')
            })

            polyEditor.on('end', function (event) {
                log.info('触发事件： end')
                // event.target 即为编辑后的多边形对象
            })
            polygon.on('dragging', function (event) {
                log.info('触发事件：dragging')
            })

        }
        function closePolygon() {
            polyEditor.close()
        }
        function openPolygon() {
            polyEditor.open()

        }
        function setDraggable() {
            draggable = !draggable
            log.info('修改draggable为-' + draggable)
            polygon.setOptions({
                strokeColor: '#ffeeff',
                fillColor: '#3366FF',
                draggable: draggable, //是否可拖动
            });
        }
        function clearMask() {
            log.info('清除遮罩')
            map.remove(polygon); //可以传入一个数组，表示批量移除.这里有个问题就是，如何矢量图处于编辑状态，他的编辑点是清除不了的
            // polygon.setMap(null) //同样无法清除编辑点
            //没找到相应api，想着直接把path变成空数组达到清除编辑点的效果
            // polygon.setOptions({
            //     path: [], //发现这样清空没效果
            // }); 
            polygon.setPath([]); //这样可以
        }
        function clearAllMask() {
            log.info('清除所有覆盖物')
            map.clearMap()
        }

    </script>
    <!-- 圆 -->
    <script type="text/javascript">
        var circle = null
        var circleEditor = null
        var map = new AMap.Map("container", {
            center: [116.400274, 39.905812],
            zoom: 14
        });

        // 创建圆
        function createCircle() {
            circle = new AMap.Circle({
                center: [116.433322, 39.900255],
                radius: 1000, //半径
                borderWeight: 3,
                strokeColor: "#FF33FF",
                strokeOpacity: 1,
                strokeWeight: 6,
                strokeOpacity: 0.2,
                fillOpacity: 0.4,
                strokeStyle: 'dashed',
                strokeDasharray: [10, 10],
                // 线样式还支持 'dashed'
                fillColor: '#1791fc',
                zIndex: 50,
                draggable: draggable, //是否可拖动
            })

            circle.setMap(map)
            // 缩放地图到合适的视野级别
            map.setFitView([circle])
            circleEditor = new AMap.CircleEditor(map, circle)

            // 监听事件,注意监听事件分为polyEditor和polygon
            // https://lbs.amap.com/api/javascript-api/reference/overlay#circle
            // https://lbs.amap.com/api/javascript-api/reference/plugin#AMap.CircleEditor
            circleEditor.on('move', function (event) {
                //切忌不要通过event的路径去拿path，tm路径居然会不定时变，辛亏上线前发现了。
                //可以用circle.getRadius()和circle.getCenter()获取中心坐标和半径。
                log.info('触发事件：move')
            })

            circleEditor.on('adjust', function (event) {
                log.info('触发事件：adjust')
            })

            circleEditor.on('end', function (event) {
                log.info('触发事件： end')
                // event.target 即为编辑后的圆形对象
            })
            circle.on('dragging', function (event) {
                log.info('触发事件：dragging')
            })

        }
        function closeCircle() {
            circleEditor.close()
        }
        function openCircle() {
            circleEditor.open()

        }
        // 圆在编辑状态下，已经可以拖动了，其实这样挺好的，不像多边形，还是有点小坑
        function setCircleDraggable() {
            draggable = !draggable
            log.info('修改draggable为-' + draggable)
            circle.setOptions({
                draggable: draggable, //是否可拖动
            });
        }

        function clearCircleMask() {
            log.info('清除遮罩')
            map.remove(circle); //和多边形一样 编辑点还在
            // circle.setMap(null) //或

            circle.setCenter([0, 0])  //设置下圆心已达到清除编辑点效果
        }

    </script>
</body>

</html>